<template>
	<view class="login-main-box">
		<view class="login-box">
			<view class="login-title">请登录</view>
			<view class="line-box">
				<view class="input-title">手机号</view>
				<view class="input-box">
					<input focus="true" class="input" type="text" maxlength="11" v-model="formData.mobile"
						@input="inputMobile" placeholder="输入购买手机号">
				</view>

			</view>
			<view class="line-box">
				<view class="input-title">验证码</view>
				<view class="input-code-box">
					<input class="input" type="text" maxlength="4" v-model="formData.code"
						@input="inputCode" placeholder="输入验证码">
					<view @click="sendCode" class="send-code-btn">{{sendCodeText}}</view>
				</view>
			</view>
			<view class="btn-list-box">
				<view class="login-btn" @click="login">确认登录</view>
				<view class="cancel-btn" @click="cancel">取消</view>
			</view>
			<view class="clauze">
				<checkbox-group @change="agreementChange">
					<checkbox :checked="formData.isAgreement" color="#48C164" />
				</checkbox-group>
				<view>
					<text class="text" @click="agreementChange">
						我已阅读并同意
					</text>
					<text class="tip-color" @click.stop="showAgreementHandler()">《关于客户个人信息收集、使用规则公告》</text>
				</view>
			</view>
		</view>
		<xmly-agreement v-if="isShowAgreement" @ok="isShowAgreement=false"
			:agreementType="agreementType"></xmly-agreement>
	</view>
</template>

<script>
	import countDownUtil from '../../utils/countDownUtil';
	import ximaLayaShengHeApi from "@/api/ximaLayaShengHeApi.js"
	import validParamsUtil from '../../utils/validParamsUtil';
	import messageUtil from '../../utils/messageUtil';

	export default {
		name: "xmly-login",
		data() {
			return {
				isShowAgreement: false,
				agreementType: 3,
				sendCodeText: '获取验证码',
				sendCodeDownNumber: 0,
				formData: {
					mobile: '',
					code: '',
					isAgreement: false,
				}
			};
		},
		methods: {
			inputMobile(event) {
				this.formData.mobile = event.target.value
			},
			inputCode(event) {
				this.formData.code = event.target.value
			},
			login() {
				if (!this.formData.isAgreement) {
					messageUtil.showSuccess('请阅读并同意条款')
					return;
				}
				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					messageUtil.showFail('手机号不正确');
					return;
				}
				if (this.formData.code.length == 0) {
					messageUtil.showFail('验证码不能为空');
					return;
				}
				messageUtil.showLoading()
				ximaLayaShengHeApi.login(this.formData.mobile, this.formData.code, res => {
					messageUtil.closeLoading()
					this.$emit('success')
				}, err => {
					messageUtil.closeLoading()
				})
			},
			cancel() {
				this.$emit('cancel');
			},
			sendCode() {

				if (this.sendCodeDownNumber > 0) {
					return;
				}

				if (!validParamsUtil.validPhone(this.formData.mobile)) {
					console.log('mobile', this.formData.mobile, this.formData.mobile.length)
					messageUtil.showFail('手机号不正确');
					return;
				}
				messageUtil.showLoading()
				ximaLayaShengHeApi.sendCode(this.formData.mobile, res => {
					messageUtil.closeLoading()
					messageUtil.showSuccess('发送成功')
					this.sendCodeDownNumber = 60;
					countDownUtil.start(this.sendCodeDownNumber, res => {
						this.sendCodeDownNumber = res;
						if (res <= 0) {
							this.sendCodeText = '获取验证码';
						} else {
							this.sendCodeText = '重新获取(' + res + ')';
						}
					})
				}, err => {
					messageUtil.closeLoading()
					messageUtil.showFail('短信发送失败')
				})

			},
			showAgreementHandler() {
				this.isShowAgreement = true
			},
			agreementChange(e) {
				this.formData.isAgreement = !this.formData.isAgreement;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-main-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		background: url("https://h5.sx2b2c.com/images/xima_laya/index/shadow.png");
		left: 0;
		top: 0;

		.login-box {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			background: #FFFFFF;
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			padding: 38rpx 50rpx 60rpx;

			.login-title {
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1A1A1A;
				text-align: center;

			}

			.line-box {
				position: relative;
				margin-top: 50rpx;

				.input-title {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #1A1A1A;
				}

				.input-box {
					border-bottom: solid 1rpx #B3B3B3;
					margin-top: 20rpx;

					.input {
						display: block;
						height: 80rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;

					}
				}

				.input-code-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: solid 1rpx #B3B3B3;
					margin-top: 20rpx;

					.input {
						display: block;
						height: 80rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #808080;

					}

					.send-code-btn {
						margin-right: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #48C164;
					}
				}

			}
		}
	}

	.btn-list-box {
		margin-top: 10rpx;

		.login-btn {
			height: 97rpx;
			background: #48C164;
			border-radius: 5rpx;
			text-align: center;
			line-height: 97rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-top: 35rpx;

		}

		.cancel-btn {
			height: 97rpx;
			line-height: 97rpx;
			background: #FFFFFF;
			border: 1px solid #808080;
			border-radius: 5rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #808080;
			margin-top: 17rpx;
		}
	}


	.clauze {
		width: 100%;
		margin: 30rpx auto 0;
		text-align: left;
		padding: 0 !important;
		display: flex;
		align-items: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #3E3E3E;

		.text {
			letter-spacing: 2rpx;
			font-size: 22rpx;
			color: #3E3E3E;
		}

		.tip-color {
			font-size: 22rpx;
			color: #48C164;
		}
	}
</style>